<template>
    <div>
      <el-container style="height: 100vh;">
        <el-header style="height: 50px; padding: 0;">
          <div class="header-box">
            <div class="system-name">AI数字人管理平台</div>
           
            <div class="header-right-box">
              <div class="avatar-box">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              </div>
              <div class="sname-box">Admin</div>
              <div class="logout">
                <el-button type="text" @click="logout">退出</el-button>
              </div>
            </div>
          </div>
        </el-header>
        <el-container style="height: calc(100vh - 50px);">
          <el-aside width="200px" >
            <div class="menu-box">
              <ul>
                <li :class="choiceMenu === 1 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 1 ? '#00182d' : '#00182d' }" @click="choice_menu(1)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 1?require('../assets/images/menu-icons/icon1_selected.png'):require('../assets/images/menu-icons/icon1.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 1 ? '#0a7fff' : '#5f78a2' }">轮播管理</div>
                </li>
                <li :class="choiceMenu === 2 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 2 ? '#00182d' : '#00182d' }" @click="choice_menu(2)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 2?require('../assets/images/menu-icons/icon2_selected.png'):require('../assets/images/menu-icons/icon2.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 2 ? '#0a7fff' : '#5f78a2' }">订单管理</div>
                </li>
                <li :class="choiceMenu === 3 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 3 ? '#00182d' : '#00182d' }" @click="choice_menu(3)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 3?require('../assets/images/menu-icons/icon3_selected.png'):require('../assets/images/menu-icons/icon3.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 3 ? '#0a7fff' : '#5f78a2' }">生成管理</div>
                </li>
                <li :class="choiceMenu === 4 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 4 ? '#00182d' : '#00182d' }" @click="choice_menu(4)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 4?require('../assets/images/menu-icons/icon4_selected.png'):require('../assets/images/menu-icons/icon4.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 4 ? '#0a7fff' : '#5f78a2' }">用户管理</div>
                </li>
                <li :class="choiceMenu === 5 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 5 ? '#00182d' : '#00182d' }" @click="choice_menu(5)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 5?require('../assets/images/menu-icons/icon5_selected.png'):require('../assets/images/menu-icons/icon5.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 5 ? '#0a7fff' : '#5f78a2' }">充值管理</div>
                </li>
                <li :class="choiceMenu === 6 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 6 ? '#00182d' : '#00182d' }" @click="choice_menu(6)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 6?require('../assets/images/menu-icons/icon6_selected.png'):require('../assets/images/menu-icons/icon6.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 6 ? '#0a7fff' : '#5f78a2' }">兑换管理</div>
                </li>
                <li :class="choiceMenu === 7 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 7 ? '#00182d' : '#00182d' }" @click="choice_menu(7)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 7?require('../assets/images/menu-icons/icon7_selected.png'):require('../assets/images/menu-icons/icon7.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 7 ? '#0a7fff' : '#5f78a2' }">提现处理</div>
                </li>
                <li :class="choiceMenu === 8 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 8 ? '#00182d' : '#00182d' }" @click="choice_menu(8)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 8?require('../assets/images/menu-icons/icon8_selected.png'):require('../assets/images/menu-icons/icon8.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 8 ? '#0a7fff' : '#5f78a2' }">课程管理</div>
                </li>
                <li :class="choiceMenu === 9 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 9 ? '#00182d' : '#00182d' }" @click="choice_menu(9)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 9?require('../assets/images/menu-icons/icon9_selected.png'):require('../assets/images/menu-icons/icon9.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 9 ? '#0a7fff' : '#5f78a2' }">报名管理</div>
                </li>
                <li :class="choiceMenu === 10 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 10 ? '#00182d' : '#00182d' }" @click="choice_menu(10)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 10?require('../assets/images/menu-icons/icon2_selected.png'):require('../assets/images/menu-icons/icon2.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 10 ? '#0a7fff' : '#5f78a2' }">音色Id库</div>
                </li>
                <li :class="choiceMenu === 11 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 11 ? '#00182d' : '#00182d' }" @click="choice_menu(11)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 11?require('../assets/images/menu-icons/icon1_selected.png'):require('../assets/images/menu-icons/icon1.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 11 ? '#0a7fff' : '#5f78a2' }">系统设置</div>
                </li>
                <li :class="choiceMenu === 12 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 12 ? '#00182d' : '#00182d' }" @click="choice_menu(12)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 12?require('../assets/images/menu-icons/icon1_selected.png'):require('../assets/images/menu-icons/icon1.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 12 ? '#0a7fff' : '#5f78a2' }">素材中心</div>
                </li>
                <li :class="choiceMenu === 13 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 13 ? '#00182d' : '#00182d' }" @click="choice_menu(13)">
                  <div class="menu-li-icon_box">
                    <img :src="choiceMenu === 13?require('../assets/images/menu-icons/icon1_selected.png'):require('../assets/images/menu-icons/icon1.png')" class="menu-li-icon">
                  </div>
                  <div class="menu-li-name" :style="{ color: choiceMenu === 13 ? '#0a7fff' : '#5f78a2' }">Ai同款</div>
                </li>
              </ul>
            </div>
          </el-aside>
          <el-main>
            <index-data ref="indexData"></index-data>
            <users-index ref="usersIndex"></users-index>
            <recharge-management ref="rechargeManagement"></recharge-management>
            <exchange-management ref="exchangeManagement"></exchange-management>
            <order-management ref="orderManagement"></order-management>
            <withdrawal-processing ref="withdrawalProcessing"></withdrawal-processing>
            <course-sort ref="courseSort"></course-sort>
            <event-management ref="eventManagement"></event-management>
            <spkid-management ref="spkidManagement"></spkid-management>
            <generate-management ref="generateManagement"></generate-management>
            <system-set ref="systemSet"></system-set>
            <sucai-center ref="sucaiCenter"></sucai-center>
            <tongkuan-management ref="tongkuanManagement"></tongkuan-management>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script>
  import indexData from "@/components/indexData.vue";
  import usersIndex from "@/components/usersIndex.vue";
  import rechargeManagement from "@/components/rechargeManagement.vue";
  import exchangeManagement from "@/components/exchangeManagement.vue";
  import orderManagement from "@/components/orderManagement.vue";
  import withdrawalProcessing from "@/components/withdrawalProcessing.vue";
  import courseSort from "@/components/courseSort.vue";
  import eventManagement from "@/components/eventManagement.vue";
  import spkidManagement from "@/components/spkidManagement.vue";
  import generateManagement from "@/components/generateManagement.vue";
  import systemSet from "@/components/systemSet.vue";
  import sucaiCenter from "@/components/sucaiCenter.vue";
  import tongkuanManagement from "@/components/tongkuanManagement.vue";
  export default {
    components: {
      indexData,
      usersIndex,
      rechargeManagement,
      exchangeManagement,
      orderManagement,
      withdrawalProcessing,
      courseSort,
      eventManagement,
      spkidManagement,
      generateManagement,
      systemSet,
      sucaiCenter,
      tongkuanManagement
    },
    data() {
      return {
        choiceMenu:1
      };
    },
    created() {
      
    },
    methods: {
      choice_menu(id){
        this.closeAllBox();
        this.choiceMenu=id;
        if(id==1){
          //显示首页
          if (this.$refs.indexData) {
            this.$refs.indexData.boxIsShow = true;
            this.$refs.indexData.__init();
          }
        }else if(id==2){
          //订单管理
          if (this.$refs.orderManagement) {
            this.$refs.orderManagement.boxIsShow = true;
            this.$refs.orderManagement.__init();
          }
        }else if(id==3){
          //生成管理
          if (this.$refs.generateManagement) {
            this.$refs.generateManagement.boxIsShow = true;
            this.$refs.generateManagement.__init();
          }
        }else if(id==4){
          //用户管理
          if (this.$refs.usersIndex) {
            this.$refs.usersIndex.boxIsShow = true;
            this.$refs.usersIndex.__init();
          }
        }else if(id==5){
          //充值管理
          if (this.$refs.rechargeManagement) {
            this.$refs.rechargeManagement.boxIsShow = true;
            this.$refs.rechargeManagement.__init();
          }
        }else if(id==6){
          //兑换管理
          if (this.$refs.exchangeManagement) {
            this.$refs.exchangeManagement.boxIsShow = true;
            this.$refs.exchangeManagement.__init();
          }
        }else if(id==7){
          //提现处理
          if (this.$refs.withdrawalProcessing) {
            this.$refs.withdrawalProcessing.boxIsShow = true;
            this.$refs.withdrawalProcessing.__init();
          }
        }else if(id==8){
          //课程管理
          if (this.$refs.courseSort) {
            this.$refs.courseSort.boxIsShow = true;
            this.$refs.courseSort.__init();
          }
        }else if(id==9){
          //报名管理
          if (this.$refs.eventManagement) {
            this.$refs.eventManagement.boxIsShow = true;
            this.$refs.eventManagement.__init();
          }
        }else if(id==10){
          //音色id库
          if (this.$refs.spkidManagement) {
            this.$refs.spkidManagement.boxIsShow = true;
            this.$refs.spkidManagement.__init();
          }
        }else if(id==11){
          //系统设置
          if (this.$refs.systemSet) {
            this.$refs.systemSet.boxIsShow = true;
            this.$refs.systemSet.__init();
          }
        }else if(id==12){
          //系统设置
          if (this.$refs.sucaiCenter) {
            this.$refs.sucaiCenter.boxIsShow = true;
            this.$refs.sucaiCenter.__init();
          }
        }else if(id==13){
          //系统设置
          if (this.$refs.tongkuanManagement) {
            this.$refs.tongkuanManagement.boxIsShow = true;
            this.$refs.tongkuanManagement.__init();
          }
        }
      },
      closeAllBox(){
        if (this.$refs.indexData) {
          this.$refs.indexData.boxIsShow = false;
        }
        if (this.$refs.usersIndex) {
          this.$refs.usersIndex.boxIsShow = false;
        }
        if (this.$refs.rechargeManagement) {
          this.$refs.rechargeManagement.boxIsShow = false;
        }
        if (this.$refs.exchangeManagement) {
          this.$refs.exchangeManagement.boxIsShow = false;
        }
        if (this.$refs.orderManagement) {
          this.$refs.orderManagement.boxIsShow = false;
        }
        if (this.$refs.withdrawalProcessing) {
          this.$refs.withdrawalProcessing.boxIsShow = false;
        }
        if(this.$refs.courseSort) {
          this.$refs.courseSort.boxIsShow = false;
        }
        if(this.$refs.eventManagement) {
          this.$refs.eventManagement.boxIsShow = false;
        }
        if (this.$refs.spkidManagement) {
          this.$refs.spkidManagement.boxIsShow = false;
        }
        if (this.$refs.generateManagement) {
          this.$refs.generateManagement.boxIsShow = false;
        }
        if (this.$refs.systemSet) {
          this.$refs.systemSet.boxIsShow = false;
        }
        if (this.$refs.sucaiCenter) {
          this.$refs.sucaiCenter.boxIsShow = false;
        }
        if (this.$refs.tongkuanManagement) {
          this.$refs.tongkuanManagement.boxIsShow = false;
        }
      },
      logout(){
        sessionStorage.clear();
        this.$router.push('/login');
      }
    }
  }
  </script>
  <style scoped lang="scss">
    .header-box{
      height: 100%;
      position: relative;
    }
    .logo-box{
      height: 100%;
      float: left;
      margin-left: 10px;
    }
    .logo{
      height: 40px;
      margin-top: 5px;
    }
    .system-name{
      float: left;
      width: 200px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      background-image:-webkit-linear-gradient(left,#2095ff,#0a7fff); 
      font-size: 18px;
      font-weight: 600;
    }
    .header-right-box{
      position: absolute;
      right: 4%;
    }
    .avatar-box{
      float: left;
      margin-right: 20px;
    }
    .logout{
      float: left;
      line-height: 50px;
      font-size: 14px;
    }
    ::v-deep .el-avatar{
      margin-top: 10px;
      height: 30px;
      width: 30px;
    }
    .menu-box ul{
      padding: 0;
      margin: 0;
      margin-top: 38px;
    }
    .menu-li{
      list-style: none;
      height: 50px;
      margin-bottom: 5px;
    }
    .menu_selected{
      position: relative;
    }
    .menu_selected::after{
      position: absolute;
      height: 100%;
      width: 5px;
      background-color: #1e4dc6;
      top: 0;
      left: 0;
      border-radius: 10px;
    }
    .menu-li-icon_box{
      float: left;
      height: 100%;
      margin-left: 20px;
      width: 25px;
      text-align: center;
    }
    .menu-li-icon{
      height: 22px;
      margin-top: 14px;
    }
    .menu-li-name{
      float: left;
      line-height: 50px;
      font-size: 15px;
      margin-left: 20px;
      width: 70px;
      text-align: left;
      cursor: default;
    }
    .menu-li-s-box{
      float: left;
      height: 100%;
      margin-left: 10px;
    }
    .menu-li-s{
      height: 6px;
      margin-top: 22px; 
    }
    .sname-box{
      float: left;
      line-height: 50px;
      font-size: 14px;
      margin-right: 30px;
    }
    ::v-deep .el-header{
      height: 50px;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
    }
    ::v-deep .el-main{
      padding: 0;
    }
    .news_box{
      position: absolute;
      right: 18%;
    }
    .newstk_box{
      position: fixed;
      width: 300px;
      height: 300px;
      top: 15px;
      right: 2%;
      box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background-color: #fff;
    }
    .newstk_title_box{
      height: 28px;
      width: 100%;
      margin-top: 8px;
    }
    .icon_tips{
      position: absolute;
      top: 8px;
      left: 10px;
      height: 28px;
    }
    .newstk_title{
      position: absolute;
      height: 28px;
      line-height: 28px;
      left: 42px;
      top: 8px;
      font-size: 16px;
    }
    .icon_close{
      position: absolute;
      height: 12px;
      top: 12px;
      right: 12px;
    }
    .newstk_content_box{
      text-align: left;
      margin-top: 12px;
      font-size: 13px;
      color: #999;
      margin-left: 40px;
    }
    .newstk_content{
      margin-bottom: 10px;
    }
    .el-aside {
      background-color: #00182d;
      color: #5f78a2;
    }
  </style>